<template>
    <el-container>
        <el-header style="display:flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid #f2f2f2;">
            <div>
                <svg-icon class="primary" :icon-class="$route.meta.icon" />
                <span class="primary">{{ $route.meta.title }}</span>
                <!--
<span class="linkAddress">首页链接：http://{{mchId}}.rzico.com</span>
-->
                <i class="el-icon-document-copy linkAddress_icon" @click="copy"></i>
            </div>
            <div class="header-button-container">
                <el-button icon="el-icon-coin" style="margin-left: 10px" type="primary" :loading="clicked" @click="saveDesigner">保存
                </el-button>
            </div>
        </el-header>
        <div class="designer_box">
            <div class="designer_left">
                <div class="component_box">
                    <div class="component" @click="componentClick(index)" v-for="(item,index) in component">
                        <i slot="reference" :class="item.icon"></i>
                        <span class="component_name">{{ item.title }}</span>
                        <div class="triangle_border_left" v-show="categoryIndex == index"></div>
                    </div>
                </div>
                <div class="component_item_box">
                    <draggable class="dragArea list-group" :list="componentForm" :group="{ name: 'comp', pull: 'clone', put: false }" @change="log">
                        <div class="component_item" v-for="element in componentForm" :key="element.id">
                            <div class="component_item_img">
                                <img :src="element.img" width="100%" height="100%">
                            </div>
                            <span class="component_item_name">{{ element.title }}</span>
                            <span v-show="element.imgTitle !=null" style="font-size: 12px;color: #A8A9A9;margin-top: 6px;">推荐图片尺寸（{{ element.imgTitle }}）</span>
                        </div>
                    </draggable>
                </div>
            </div>
            <div style="width: 100%;height: calc(100vh - 146px);display: flex;justify-content: center;align-items: center">
                <div class="designer_center">
                    <div class="inner-container">
                        <div class="element">
                            <draggable tag="el-collapse" class="mobile_draggable" :list="designerForm" group="comp" @change="log">
                                <div style="position: relative;" v-for="(item,index) in designerForm" :class="[componentsIndex === index?'component_choose':'']" @click="chooseClick(item,index)">
                                    <component :style="{marginTop:item.mt+'px',marginBottom:item.mb+'px'}" :content="item" :key="timer" :is="item.name" />
                                </div>
                            </draggable>
                        </div>
                    </div>
                </div>
            </div>
            <div class="component_Set">
                <div v-if="componentsChoose !=''">
                    <el-tabs type="border-card" style="height: calc(100vh - 146px)">
                        <el-tab-pane label="组件设置">
                            <div v-show="designerForm[componentsIndex].titleType!=true">
                                <span class="component_Set_Name">标题</span>
                                <el-input v-model="designerForm[componentsIndex].title"></el-input>
                            </div>
                            <div style="margin-top: 10px" v-show="designerForm[componentsIndex].subTitleType!=true">
                                <span class="component_Set_Name">副标题</span>
                                <el-input v-model="designerForm[componentsIndex].subTitle"></el-input>
                            </div>
                            <div style="margin-top: 10px" v-show="designerForm[componentsIndex].tagidsType!=true">
                                <span class="component_Set_Name">标签</span>
                                <el-select v-model="tagData" multiple placeholder="请选择" @change="selectClick">
                                    <el-option v-for="item in tagForm" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-top: 10px" v-show="designerForm[componentsIndex].rowsType !=true">
                                <span class="component_Set_Name">数量</span>
                                <el-input type="number" v-model="designerForm[componentsIndex].rows"></el-input>
                            </div>
                            <div style="margin-top: 10px">
                                <span class="component_Set_Name">上边距</span>
                                <el-input type="number" v-model="designerForm[componentsIndex].mt"></el-input>
                            </div>
                            <div style="margin-top: 10px">
                                <span class="component_Set_Name">下边距</span>
                                <el-input type="number" v-model="designerForm[componentsIndex].mb"></el-input>
                            </div>
                            <div>
                                <el-button style="margin-top: 10px" type="primary" icon="el-icon-check" @click="saveClick">组件预览
                                </el-button>
                            </div>
                            <div>
                                <el-button style="margin-top: 10px" type="primary" icon="el-icon-delete" @click="deleteClick">删除组件
                                </el-button>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column" v-show="componentsChoose ==''">
                    <i style="color: #888888;" class="el-icon-s-tools"></i>
                    <span style="font-size: 16px;color: #888888;margin-top: 10px">请点击选择组件</span>
                </div>
            </div>
        </div>
    </el-container>
</template>

<script>
import fundComponent from "@/views/designer/components/fundComponent/fundComponent";
import swipersTranslate from "@/views/designer/components/shuffling/swipersTranslate";
import swipersCity from "@/views/designer/components/shuffling/swipersCity";
import bargainProductRow from "@/views/designer/components/bargainProduct/bargainProductRow";
import groupProductRow from "@/views/designer/components/groupProduct/groupProductRow";
import conciseProductRow from "@/views/designer/components/product/conciseProductRow";
import conciseProduct from "@/views/designer/components/product/conciseProduct";
import magic_category from "@/views/designer/components/category/magic_category";
import bargainService from "@/views/designer/components/bargainService/bargainService";
import bargainProduct from "@/views/designer/components/bargainProduct/bargainProduct";
import wxHeader from "@/views/designer/components/wxHeader/wxHeader";
import groupService from "./components/groupService/groupService";
import groupProduct from "./components/groupProduct/groupProduct";
import productRow from "./components/product/productRow";
import swipers from "./components/shuffling/swipers";
import acrossService from "./components/appletAd/acrossService";
import shuffingSmall from "./components/shuffling/shuffingSmall";
import draggable from "vuedraggable";
import searchFocus from "./components/search/search_focus";
import countdowns from "./components/countdowns/countdowns";
import notice from "./components/notice/notice";
import adBanner from "./components/shuffling/adBanner";
import category_three from "./components/category/category_three";
import category_four from "./components/category/category_four";
import category_five from "./components/category/category_five";
import category_six from "./components/category/category_six";
import category_eight from "./components/category/category_eight";
import category_ten from "./components/category/category_ten";
import orrline_courses from "./components/offline_courses/offline_courses";
import consulting from "./components/consulting/consulting";
import category_headerImg from "./components/category/category_headerImg";
import search from "./components/search/search";
import { list, update } from "@/api/designer";
import { list as tagList } from "@/api/tag";
import { mapGetters } from "vuex";
import utils from "../../utils/utils";
import acrossAd from "./components/appletAd/acrossAd";
import hotGoods from "./components/hotGoods/hotGoods";
import xcxAd from "./components/xcxAd/xcxAd";
import brand from "./components/brand/brand";
import wxSearch from "./components/search/wxSearch";
import swipersChange from "./components/shuffling/swipersChange";
import products from "./components/product/products";
import productsCoupons from "./components/product/products";
import guidelines from "./components/guidelines/guidelines";
import videocontent from "./components/videocontent/videocontent";
import collectcoupons from "./components/collectcoupons/collectcoupons";
import shopDetail from "@/views/designer/components/shopDetail/shopDetail";
import nearbyShops from "@/views/designer/components/nearbyShops/nearbyShops";
import groupCard from "@/views/designer/components/groupProduct/groupCard";
import groupCardList from "@/views/designer/components/groupCardList/index";
import groupMultiLists from "@/views/designer/components/groupCardList/groupMultiList";
import groupPurchaseWelfarefrom from "@/views/designer/components/groupPurchaseWelfarefrom/groupPurchaseWelfarefrom";
import transferActivities from "@/views/designer/components/transferActivities/transferActivities";
import shootingActivity from "@/views/designer/components/transferActivities/shootingActivity";
import transferFiltering from "@/views/designer/components/transferActivities/transferFiltering";
import spikeGroup from "@/views/designer/components/spike/group.vue";
import publicNavigation from "@/views/designer/components/publicNavigation/index.vue";
import graphicList from "@/views/designer/components/graphicList/graphicList";

export default {
    name: "clone",
    display: "Clone",
    order: 2,
    components: {
        groupPurchaseWelfarefrom,
        groupMultiLists,
        groupCardList,
        productRow,
        products,
        productsCoupons,
        conciseProduct,
        fundComponent,
        bargainProductRow,
        conciseProductRow,
        groupProductRow,
        swipersCity,
        magic_category,
        swipers,
        wxHeader,
        groupProduct,
        swipersTranslate,
        bargainProduct,
        bargainService,
        swipersChange,
        acrossAd,
        wxSearch,
        acrossService,
        brand,
        xcxAd,
        hotGoods,
        draggable,
        shuffingSmall,
        searchFocus,
        countdowns,
        notice,
        groupService,
        orrline_courses,
        consulting,
        category_headerImg,
        search,
        category_three,
        category_four,
        category_five,
        category_six,
        category_eight,
        category_ten,
        adBanner,
        guidelines,
        videocontent,
        shopDetail,
        collectcoupons,
        groupCard,
        nearbyShops,
        transferActivities,
        shootingActivity,
        transferFiltering,
        spikeGroup,
        publicNavigation,
      graphicList
    },
    data() {
        return {
            id: "",
            component: [
                {
                    icon: "el-icon-search",
                    title: "公共组件",
                    childs: [
                        {
                          title: "优惠券",
                          name: "collectcoupons",
                          subTitle: "",
                          tagids: "",
                          dataType: 0,
                          icon: "el-icon-s-goods",
                          rows: "3",
                          img: "http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/ef3673c6a202c759418a408ef881660.png",
                          titleType: true, //是否输入名称
                          subTitleType: true, //是否输入副标题
                          tagidsType: true, //是否输入标签
                          rowsType: true, //是否输入页数
                          mt: 0,
                          mb: 0,
                        },
                        {
                            title: "倒计时",
                            name: "countdowns",
                            subTitle: "",
                            tagids: "",
                            dataType: 20,
                            icon: "el-icon-eleme",
                            rows: "1",
                            img: "https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/32120210918203238.jpg",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "公告组件",
                            name: "notice",
                            subTitle: "",
                            tagids: "",
                            dataType: 20,
                            icon: "el-icon-eleme",
                            rows: "1",
                            img: "https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/noticeBanner.png",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "全屏搜索",
                            name: "searchFocus",
                            subTitle: "",
                            tagids: "",
                            dataType: 20,
                            icon: "el-icon-eleme",
                            rows: "1",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%85%A8%E5%B1%8F%E6%90%9C%E7%B4%A2.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "基金福利专区",
                            name: "fundComponent",
                            subTitle: "",
                            tagids: "",
                            dataType: 20,
                            icon: "el-icon-eleme",
                            rows: "1",
                            img: "http://rzico.oss-cn-shenzhen.aliyuncs.com/img/fundComponent.png",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "导航搜索条",
                            name: "wxSearch",
                            tagids: "",
                            subTitle: "",
                            dataType: 20,
                            icon: "el-icon-eleme",
                            rows: "1",
                            img: "http://rzico.oss-cn-shenzhen.aliyuncs.com/img/searchImg.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "顶部导航",
                            name: "wxHeader",
                            subTitle: "",
                            tagids: "",
                            dataType: 20,
                            icon: "el-icon-eleme",
                            rows: "1",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "新手指引",
                            name: "guidelines",
                            subTitle: "新手上路",
                            tagids: "",
                            dataType: 20,
                            icon: "el-icon-eleme",
                            rows: "1",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E6%96%B0%E6%89%8B%E4%B8%8A%E8%B7%AF.png",
                            titleType: true, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                    ],
                },
                {
                    icon: "el-icon-refresh",
                    title: "广告组件",
                    childs: [
                        {
                            title: "全屏轮播图",
                            name: "swipersTranslate",
                            tagids: "",
                            subTitle: "",
                            dataType: 8,
                            icon: "el-icon-s-goods",
                            rows: "4",
                            img: "http://rzico.oss-cn-shenzhen.aliyuncs.com/img/shuffling.png",
                            imgTitle: "750*510",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "带搜索轮播图",
                            name: "swipers",
                            tagids: "",
                            subTitle: "",
                            dataType: 8,
                            icon: "el-icon-s-goods",
                            rows: "4",
                            img: "http://cdn.rzico.com/v4.0/search.png",
                            imgTitle: "710*360",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "带定位轮播图",
                            name: "swipersCity",
                            tagids: "",
                            subTitle: "",
                            dataType: 8,
                            icon: "el-icon-s-goods",
                            rows: "4",
                            img: "http://cdn.rzico.com/v4.0/search.png",
                            imgTitle: "710*360",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "轮播图",
                            name: "swipersChange",
                            tagids: "",
                            dataType: 8,
                            subTitle: "",
                            icon: "el-icon-s-goods",
                            rows: "4",
                            img: "http://cdn.rzico.com/img/lunbo.png",
                            imgTitle: "710*300",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "广告横幅",
                            name: "adBanner",
                            tagids: "",
                            dataType: 8,
                            subTitle: "",
                            icon: "el-icon-s-goods",
                            rows: "1",
                            img: "http://cdn.rzico.com/img/banner.png",
                            imgTitle: "宽（750）高自适应",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "公共导航",
                            name: "publicNavigation",
                            subTitle: "查看更多",
                            tagids: "",
                            dataType: 8,
                            icon: "el-icon-eleme",
                            rows: "1",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%85%AC%E5%85%B1%E5%AF%BC%E8%88%AA.png",
                            imgTitle: "宽（750）高(62)",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                    ],
                },
                {
                    icon: "el-icon-monitor",
                    title: "专题组件",
                    childs: [
                        {
                            title: "专题组件一",
                            name: "xcxAd",
                            tagids: "",
                            dataType: 9,
                            subTitle: "",
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://cdn.rzico.com/v4.0/wx-page.png",
                            imgTitle: "宽（750）高(62)",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "专题组件二",
                            name: "hotGoods",
                            tagids: "",
                            subTitle: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://cdn.rzico.com/v4.0/wx-hotGoods.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "专题组件三",
                            name: "acrossService",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "10",
                            img: "http://cdn.rzico.com/v4.0/wx-service.jpg",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "专题组件四",
                            name: "acrossAd",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://cdn.rzico.com/v4.0/wx-recommend.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                        {
                            title: "品牌专题五",
                            name: "brand",
                            subTitle: "",
                            tagids: "",
                            dataType: 2,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://cdn.rzico.com/v4.0/wx-brand.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0, //上边距
                            mb: 0, //下边距
                        },
                    ],
                },
                {
                    icon: "el-icon-menu",
                    title: "导航组件",
                    childs: [
                        {
                            title: "魔方导航",
                            name: "magic_category",
                            subTitle: "导航",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-eleme",
                            rows: "9",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E9%AD%94%E6%96%B9%E5%AF%BC%E8%88%AA.png",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "三图导航",
                            name: "category_three",
                            tagids: "",
                            subTitle: "",
                            dataType: 9,
                            icon: "el-icon-eleme",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%88%86%E7%B1%BB3.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "四图导航",
                            name: "category_four",
                            tagids: "",
                            dataType: 9,
                            subTitle: "",
                            icon: "el-icon-eleme",
                            rows: "4",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%88%86%E7%B1%BB4.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "五图导航",
                            name: "category_five",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-eleme",
                            rows: "5",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%88%86%E7%B1%BB5.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "六图导航",
                            name: "category_six",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-eleme",
                            rows: "6",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%88%86%E7%B1%BB6.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "八图导航",
                            name: "category_eight",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-eleme",
                            rows: "8",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%88%86%E7%B1%BB8.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "十图导航",
                            name: "category_ten",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-eleme",
                            rows: "10",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%88%86%E7%B1%BB10.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                    ],
                },
                {
                    icon: "el-icon-monitor",
                    title: "商品组件",
                    childs: [
                        {
                            title: "纵向商品列表（不带分类）",
                            name: "conciseProduct",
                            subTitle: "纵向商品列表",
                            tagids: "",
                            dataType: 3,
                            icon: "el-icon-s-goods",
                            rows: "10",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E7%BA%B5%E5%90%91%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8%EF%BC%88%E4%B8%8D%E5%B8%A6%E5%88%86%E7%B1%BB%EF%BC%89.png",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "横向商品列表（不带分类）",
                            name: "conciseProductRow",
                            tagids: "",
                            subTitle: "横向商品列表",
                            dataType: 3,
                            icon: "el-icon-s-goods",
                            rows: "10",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E6%A8%AA%E5%90%91%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8%EF%BC%88%E4%B8%8D%E5%B8%A6%E5%88%86%E7%B1%BB%EF%BC%89.png",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "纵向商品列表",
                            subTitle: "纵向商品列表",
                            name: "products",
                            tagids: "",
                            dataType: 3,
                            icon: "el-icon-s-goods",
                            rows: "10",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E7%BA%B5%E5%90%91%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.png",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "横向商品列表",
                            subTitle: "横向商品列表",
                            name: "productRow",
                            tagids: "",
                            dataType: 3,
                            icon: "el-icon-s-goods",
                            rows: "10",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E6%A8%AA%E5%90%91%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.png",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        // {
                        //     title: "兑换券商品列表",
                        //     subTitle: "",
                        //     name: "productsCoupons",
                        //     tagids: "",
                        //     dataType: 3,
                        //     icon: "el-icon-s-goods",
                        //     rows: "3",
                        //     img: "https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/321321.jpg",
                        //     titleType: false, //是否输入名称
                        //     subTitleType: false, //是否输入副标题
                        //     tagidsType: false, //是否输入标签
                        //     rowsType: false, //是否输入页数
                        //     mt: 0,
                        //     mb: 0,
                        // },
                    ],
                },
                {
                    icon: "el-icon-monitor",
                    title: "团购组件",
                    childs: [
                        {
                            title: "红包拼团门户组件",
                            name: "groupService",
                            tagids: "",
                            subTitle: "红包拼团",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E7%BA%A2%E5%8C%85%E6%8B%BC%E5%9B%A2%E9%97%A8%E6%88%B7%E7%BB%84%E4%BB%B6.png",
                            titleType: true, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: false, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "红包拼团纵向列表",
                            name: "groupProduct",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E7%BA%A2%E5%8C%85%E6%8B%BC%E5%9B%A2%E7%BA%B5%E5%90%91%E5%88%97%E8%A1%A8.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "红包拼团横向列表",
                            name: "groupProductRow",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E7%BA%A2%E5%8C%85%E6%8B%BC%E5%9B%A2%E6%A8%AA%E5%90%91%E5%88%97%E8%A1%A8.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "七七拼团门户组件",
                            name: "groupCard",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E4%B8%83%E4%B8%83%E6%8B%BC%E5%9B%A2%E9%97%A8%E6%88%B7%E7%BB%84%E4%BB%B6.png",
                            titleType: true, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "七七拼团横向列表",
                            name: "groupCardList",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E4%B8%83%E4%B8%83%E6%8B%BC%E5%9B%A2%E6%A8%AA%E5%90%91%E5%88%97%E8%A1%A8.png",
                            titleType: true, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "多人拼团横向列表",
                            name: "groupMultiLists",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%A4%9A%E4%BA%BA%E6%8B%BC%E5%9B%A2%E6%A8%AA%E5%90%91%E5%88%97%E8%A1%A8.png",
                            titleType: true, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        // {
                        //   title: "团购福利列表",
                        //   name: "groupPurchaseWelfarefrom",
                        //   subTitle: "",
                        //   tagids: "",
                        //   dataType: 9,
                        //   icon: "el-icon-s-goods",
                        //   rows: "3",
                        //   img: "https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/321_20211020203738.jpg",
                        //   titleType: false, //是否输入名称
                        //   subTitleType: false, //是否输入副标题
                        //   tagidsType: false, //是否输入标签
                        //   rowsType: false, //是否输入页数
                        //   mt: 0,
                        //   mb: 0,
                        // },
                    ],
                },

                // {
                //   icon: "el-icon-monitor",
                //   title: "抢拍组件",
                //   childs: [
                //     {
                //       title: "抢拍活动列表",
                //       name: "transferActivities",
                //       subTitle: "",
                //       tagids: "",
                //       dataType: 9,
                //       icon: "el-icon-s-goods",
                //       rows: "3",
                //       img: "https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/321321321_20211201172307.png",
                //       titleType: true, //是否输入名称
                //       subTitleType: true, //是否输入副标题
                //       tagidsType: false, //是否输入标签
                //       rowsType: false, //是否输入页数
                //       mt: 0,
                //       mb: 0,
                //     },
                //     {
                //       title: "转让列表组件",
                //       name: "shootingActivity",
                //       subTitle: "",
                //       tagids: "",
                //       dataType: 9,
                //       icon: "el-icon-s-goods",
                //       rows: "3",
                //       img: "https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/TransferList.png",
                //       titleType: false, //是否输入名称
                //       subTitleType: false, //是否输入副标题
                //       tagidsType: false, //是否输入标签
                //       rowsType: false, //是否输入页数
                //       mt: 0,
                //       mb: 0,
                //     },
                //     {
                //       title: "转让列表组件入口",
                //       name: "transferFiltering",
                //       subTitle: "",
                //       tagids: "",
                //       dataType: 9,
                //       icon: "el-icon-s-goods",
                //       rows: "3",
                //       img: "https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/eqewq_20211207193422.png",
                //       titleType: false, //是否输入名称
                //       subTitleType: false, //是否输入副标题
                //       tagidsType: false, //是否输入标签
                //       rowsType: false, //是否输入页数
                //       mt: 0,
                //       mb: 0,
                //     },
                //   ],
                // },
                {
                    icon: "el-icon-monitor",
                    title: "砍价组件",
                    childs: [
                        {
                            title: "砍价专题",
                            name: "bargainService",
                            subTitle: "砍价组件",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E7%A0%8D%E4%BB%B7%E4%B8%93%E9%A2%98.png",
                            titleType: false, //是否输入名称
                            subTitleType: false, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "砍价横向列表",
                            name: "bargainProduct",
                            subTitle: "",
                            tagids: "",
                            dataType: 3,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E7%A0%8D%E4%BB%B7%E6%A8%AA%E5%90%91%E5%88%97%E8%A1%A8.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                            title: "砍价纵向列表",
                            name: "bargainProductRow",
                            subTitle: "",
                            tagids: "",
                            dataType: 3,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E7%A0%8D%E4%BB%B7%E7%BA%B5%E5%90%91%E5%88%97%E8%A1%A8.png",
                            titleType: false, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: true, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                    ],
                },
                {
                    icon: "el-icon-monitor",
                    title: "店铺组件",
                    childs: [
                        {
                            title: "店铺信息",
                            name: "shopDetail",
                            subTitle: "",
                            tagids: "",
                            dataType: 9,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E5%BA%97%E9%93%BA%E4%BF%A1%E6%81%AF.png",
                            titleType: true, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                          title: "附近店铺",
                          name: "nearbyShops",
                          subTitle: "",
                          tagids: "",
                          dataType: 9,
                          icon: "el-icon-s-goods",
                          rows: "3",
                          img: "https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/nearbyShops.png",
                          titleType: false, //是否输入名称
                          subTitleType: false, //是否输入副标题
                          tagidsType: false, //是否输入标签
                          rowsType: false, //是否输入页数
                          mt: 0,
                          mb: 0,
                        },
                    ],
                },
                {
                    icon: "el-icon-monitor",
                    title: "视频组件",
                    childs: [
                        {
                            title: "视频专题",
                            name: "videocontent",
                            subTitle: "",
                            tagids: "",
                            dataType: 0,
                            icon: "el-icon-s-goods",
                            rows: "3",
                            img: "http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/9fdc06b67828026e8974131e12d8626.png",
                            titleType: true, //是否输入名称
                            subTitleType: true, //是否输入副标题
                            tagidsType: false, //是否输入标签
                            rowsType: true, //是否输入页数
                            mt: 0,
                            mb: 0,
                        },
                        {
                        title: "图文列表",
                        name: "graphicList",
                        subTitle: "",
                        tagids: "",
                        dataType: 9,
                        icon: "el-icon-s-goods",
                        rows: "3",
                        img: "https://rzico.oss-cn-shenzhen.aliyuncs.com/pay/icon_epidemic%20.png",
                        // titleType: false, //是否输入名称
                        // subTitleType: false, //是否输入副标题
                        // tagidsType: false, //是否输入标签
                        // rowsType: false, //是否输入页数
                        // mt: 0,
                        // mb: 0,
                      }
                    ],
                },
                // {
                //     icon: "el-icon-monitor",
                //     title: "领券组件",
                //     childs: [
                //         {
                //             title: "领券组件",
                //             name: "collectcoupons",
                //             subTitle: "",
                //             tagids: "",
                //             dataType: 0,
                //             icon: "el-icon-s-goods",
                //             rows: "3",
                //             img: "http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/ef3673c6a202c759418a408ef881660.png",
                //             titleType: true, //是否输入名称
                //             subTitleType: true, //是否输入副标题
                //             tagidsType: true, //是否输入标签
                //             rowsType: true, //是否输入页数
                //             mt: 0,
                //             mb: 0,
                //         },
                //     ],
                // },
                // {
                //     icon: "el-icon-monitor",
                //     title: "秒杀组件",
                //     childs: [
                //         {
                //             title: "秒杀专题",
                //             name: "spikeGroup",
                //             subTitle: "",
                //             tagids: "",
                //             dataType: 20,
                //             icon: "el-icon-s-goods",
                //             rows: "3",
                //             img: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/%E7%A7%92%E6%9D%80%E4%B8%93%E9%A2%98.png",
                //             titleType: false, //是否输入名称
                //             subTitleType: true, //是否输入副标题
                //             tagidsType: true, //是否输入标签
                //             rowsType: true, //是否输入页数
                //             mt: 0,
                //             mb: 0,
                //         },
                //     ],
                // },
            ],
            componentForm: [],
            designerForm: [],
            componentsChoose: "",
            componentsIndex: "",
            pageNum: 1,
            pageSize: 20,
            tagForm: [],
            tagData: [],
            categoryIndex: 0,
            dataType: "",
            timer: "",
            clicked: false,
        };
    },
    computed: {
        ...mapGetters(["mchId"]),
    },
    created() {
        this.id = this.$route.query.id;
        this.componentForm = this.component[0].childs;
        this.loadDesigner();
        console.log(utils.host());
    },
    methods: {
        log: function (evt) {
            console.log(evt);
            if (evt.added) {
                const item = evt.added.element;
                const idx = this.designerForm.findIndex(
                    (e) => e.name === item.name
                );
                let temp = JSON.parse(JSON.stringify(this.designerForm));
                temp[idx].name = item.name;
                this.designerForm = temp;
            }
        },
        componentClick(index) {
            this.categoryIndex = index;
            this.componentForm = this.component[index].childs;
        },
        chooseClick(data, index) {
            var _this = this;
            console.log(data);
            this.componentsChoose = data.name;
            this.componentsIndex = index;
            this.dataType = data.dataType;
            if (this.designerForm[this.componentsIndex].tagids == "") {
                this.tagData = [];
            } else {
                this.tagData =
                    this.designerForm[this.componentsIndex].tagids.split(",");
                for (var i = 0; i < _this.tagData.length; i++) {
                    _this.tagData[i] = parseInt(_this.tagData[i]);
                }
            }
            this.loadTag();
        },
        deleteClick: function () {
            this.designerForm.splice(this.componentsIndex, 1);
            this.componentsChoose = "";
            this.componentsIndex = "";
        },
        saveClick() {
            this.timer = new Date().getTime();
        },
        loadTag() {
            var _this = this;
            let params = new URLSearchParams();
            params.append("pageNum", _this.pageNum);
            params.append("pageSize", _this.pageSize);
            params.append("mchId", _this.mchId);
            params.append("type", _this.dataType);
            tagList(params)
                .then((response) => {
                    console.log(response);
                    _this.tagForm = response.data.data;
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
        loadDesigner() {
            var _this = this;
            let listData = null;
            _this.designerForm = [];
            let params = new URLSearchParams();
            params.append("mchId", _this.mchId);
            params.append("pageId", this.id);
            list(params)
                .then((response) => {
                    console.log(response);
                    for (var i = 0; i < response.data.length; i++) {
                        listData = {
                            name: response.data[i].name,
                            tagids: response.data[i].tagids,
                            title: response.data[i].title,
                            subTitle: response.data[i].subTitle,
                            dataType: response.data[i].dataType,
                            rows: response.data[i].rows,
                            titleType: response.data[i].titleType,
                            subTitleType: response.data[i].subTitleType,
                            tagidsType: response.data[i].tagidsType,
                            rowsType: response.data[i].rowsType,
                            mt: response.data[i].mt,
                            mb: response.data[i].mb,
                        };
                        _this.designerForm.push(listData);
                        // _this.designerForm = []
                    }
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
        selectClick() {
            console.log(this.tagData);
            this.designerForm[this.componentsIndex].tagids =
                this.tagData.join(",");
        },
        saveDesigner() {
            var _this = this;
            _this.clicked = true;
            let designerForm = [];
            let designerData = null;
            console.log(_this.designerForm);
            for (var i = 0; i < _this.designerForm.length; i++) {
                if (
                    _this.designerForm[i].tagids != "" ||
                    _this.designerForm[i].dataType == 20
                ) {
                    designerData = {
                        title: _this.designerForm[i].title,
                        name: _this.designerForm[i].name,
                        subTitle: _this.designerForm[i].subTitle,
                        tagids: _this.designerForm[i].tagids,
                        dataType: _this.designerForm[i].dataType,
                        rows: _this.designerForm[i].rows,
                        pageId: this.id,
                        titleType: _this.designerForm[i].titleType,
                        subTitleType: _this.designerForm[i].subTitleType,
                        tagidsType: _this.designerForm[i].tagidsType,
                        rowsType: _this.designerForm[i].rowsType,
                        mt: _this.designerForm[i].mt,
                        mb: _this.designerForm[i].mb,
                    };
                    designerForm.push(designerData);
                } else {
                    _this.$message({
                        message: "您还有标签未选择",
                        offset: 120,
                        center: true,
                    });
                    _this.clicked = false;
                    return;
                }
            }
            update(designerForm)
                .then((response) => {
                    console.log(response);
                    _this.clicked = false;
                    if (response.type == "success") {
                        _this.$message({
                            message: response.content,
                            offset: 120,
                            center: true,
                        });
                        _this.loadDesigner();
                    } else {
                        _this.$message({
                            message: response.content,
                            offset: 120,
                            center: true,
                        });
                    }
                })
                .catch((error) => {
                    _this.clicked = false;
                });
        },
        copy() {
            let url = "http://" + this.mchId + ".rzico.com";
            let oInput = document.createElement("input");
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            console.log(oInput.value);
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: "复制成功",
                type: "success",
            });
            oInput.remove();
        },
    },
};
</script>
<style lang="scss" scoped>
.designer_box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: calc(100vh - 146px);
    background-color: #f2f2f2;
}

.mobile_draggable {
    width: 100%;
    height: 100%;
    border: none;
    background-color: rgba(248, 248, 248, 1);
}

.component_box {
    width: 80px;
    height: calc(100vh - 144px);
    background-color: #888888;
    overflow: auto;
}

.component {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.component_item {
    width: 100%;
    /*height: 40px;*/
    justify-content: center;
    align-items: center;
    display: inline-flex;
    margin-top: 20px;
    flex-direction: column;
}

.component_item_box {
    width: 220px;
    height: calc(100vh - 146px);
    background-color: white;
    position: absolute;
    top: 0;
    left: 60px;
    box-shadow: 4px 0 5px -3px rgba(0, 0, 0, 0.12);
    z-index: 99;
    overflow: auto;
}

.component_item_name {
    font-size: 12px;
    margin-top: 10px;
}

.designer_left {
    display: flex;
    position: relative;
}

/*向左*/

.triangle_border_left {
    width: 0;
    height: 0;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent white transparent transparent; /*透明 灰 透明 透明 */
    position: absolute;
    right: 0;
}

.component_Set {
    width: 220px;
    height: calc(100vh - 146px);
    background-color: white;
    position: absolute;
    right: 0;
    top: 144px;
    box-shadow: -3px 0 2px 0px rgba(0, 0, 0, 0.12);
    z-index: 99;
}

.component_Set_Name {
    font-size: 16px;
    color: #888888;
    margin-bottom: 10px;
    display: block;
}

.component_choose {
    border: 1px dashed #409eff;
    box-sizing: border-box;
}

.component_name {
    font-size: 12px;
    margin-top: 10px;
}

/deep/ .el-tabs--border-card {
    border: none;
    box-shadow: none;
}

.element,
.designer_center {
    width: 375px;
    height: calc(100vh - 180px);
}

.designer_center {
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    background-color: rgba(248, 248, 248, 1);
}

.inner-container {
    position: absolute;
    overflow-y: scroll;
}

.component_item_img {
    width: 140px;
    height: 100%;
}

.linkAddress {
    font-size: 16px;
    color: #303133;
    margin-left: 30px;
}

.linkAddress_icon {
    font-size: 16px;
    color: #909399;
    margin-left: 10px;
}
</style>
